<template>
  <view>
    <view class="list">
      <!-- <view class="list-item" @click="toPath" v-for="item in [1,2,3,4,5]"> -->
      <navigator :url="'/subPage/enterprise/home/listDetails/index?id=' + item.wxUserId" v-for="item in list"
        :key="item.wxUserId" class="list-item">
        <view class="top-box">
          <view class="left-item">
            <view class="image">
              <!-- <image src="@/static/images/Ehome/defultAvatar-1.png" mode="" /> -->
              <image :src="item.avatar"></image>
            </view>
            <view class="desc-box">
              <view class="t-desc">
                <view class="name">{{ item.name || '-' }}</view>
                <view class="icon">
                  <image :src="
                    item.sex == '女'
                      ? 'http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/04/09/5285d5d3bab744009c3ab3a9a243f8de.png'
                      : 'http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/04/09/6645a9716ba349119fe1fbd3e4b8ada5.png'
                  " />
                </view>
                <view class="status" :class="{ active: item.verifyStatus === '1' }">
                  {{ item.verifyStatus === "1" ? "已实名" : "未实名" }}
                </view>
              </view>
              <view class="b-desc">
                <view class="text">{{ item.age || '-' }}岁
                  <text style="padding: 0 4rpx"> |</text>
                </view>
                <view class="text">{{ item.education || '-' }}
                  <text style="padding: 0 4rpx"> |</text>
                </view>
                <view class="text">{{ item.workExperience || '-' }}年经验</view>
              </view>
            </view>
          </view>

          <view class="right-item ellipsis1">
            <view class="label">
              <text class="" selectable="false" space="false" decode="false">
                {{ item.jobType || '-' }}
              </text>
            </view>
            <view style="height: 42rpx; margin-bottom: 15rpx"> </view>
            <view class="address">{{ item.city || '-' }}</view>
          </view>
        </view>
        <view class="line"></view>

        <view class="bottom-box">
          <view class="b-left">
            <text class="one">意向</text>
            <text class="tow">{{ item.postName || '-' }}</text>
          </view>
          <view class="b-right">
            <text class="symbol">¥</text>
            <text class="money">{{ item.salary || '-' }}</text>
          </view>
        </view>
      </navigator>
    </view>
  </view>
</template>

<script>
export default {
  name: "talentsList",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  methods: {
    // toPath() {
    //   uni.navigateTo({
    //     url: "/subPage/enterprise/home/listDetails/index",
    //   });
    // },
  },
};
</script>

<style lang="scss">
.list {
  margin-top: 30rpx;
  background-color: #f9f9f9;
  // height: 100vh;

  // .scroll {
  //   height: 100%;

  .list-item {
    height: 248rpx;
    background-color: #fff;
    border-radius: 16rpx;

    margin: 24rpx 24rpx 31rpx;

    .top-box {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 50%;
      margin-top: 32rpx;

      .left-item {
        padding-top: 24rpx;
        padding-left: 24rpx;
        display: flex;
        height: 100%;

        .image {
          width: 96rpx;
          height: 96rpx;
          margin-right: 16rpx;
          background: #eee;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .desc-box {
          display: flex;
          flex-direction: column;

          .t-desc {
            display: flex;
            margin-top: 16rpx;

            .name {
              height: 40rpx;
              line-height: 40rpx;
              font-weight: 500;
              font-size: 28rpx;
              color: #000000e0;
              margin-right: 12rpx;
              margin-bottom: 12rpx;
            }

            .icon {
              margin-right: 12rpx;

              image {
                width: 24rpx;
                height: 24rpx;
              }
            }

            .status {
              width: 82rpx;
              height: 32rpx;
              text-align: center;
              line-height: 32rpx;
              background: #f3f3f3;
              border-radius: 8rpx;
              font-weight: 500;
              font-size: 18rpx;
              color: rgba(0, 0, 0, 0.64);

              &.active {
                color: #9b7748;
                background: #ffebd1;
              }
            }
          }

          .b-desc {
            display: flex;

            .text {
              color: #00000073;
              opacity: 0.45;
              font-size: 24rpx;

              font-weight: 500;

              text-align: left;
            }
          }
        }
      }

      .right-item {
        padding-top: 32rpx;

        .label {
          position: absolute;
          right: 45rpx;
          width: 120rpx;
          height: 42rpx;
          background: #34a1ff;
          border-radius: 6rpx;
          font-weight: 500;
          font-size: 22rpx;
          color: #ffffff;
          text-align: center;
          line-height: 42rpx;
          margin-bottom: 10rpx;
        }

        .address {
          font-weight: 500;
          font-size: 24rpx;
          color: #00000073;
          margin-right: 24rpx;
        }
      }
    }

    .line {
      margin: 24rpx 24rpx 26rpx;
      height: 2rpx;
      background-color: #eeeeef;
    }

    .bottom-box {
      display: flex;
      justify-content: space-between;
      padding-left: 24rpx;
      padding-right: 24rpx;

      .b-left {
        display: flex;
        align-items: center;

        .one {
          font-weight: 500;
          font-size: 22rpx;
          color: #00000073;
          opacity: 45%;
        }

        .tow {
          padding-left: 12rpx;
          height: 45rpx;
          line-height: 45rpx;
          font-weight: 500;
          font-size: 28rpx;
          color: #000000;
          opacity: 0.64;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 360rpx;
        }
      }

      .b-right {
        .symbol {
          color: #000000;
          margin-right: 6rpx;
        }

        .money {
          color: #ff9e24;
          font-size: 34rpx;
          font-weight: 500;
          text-align: left;
        }
      }
    }
  }

  // }
}
</style>
